<template>
  <div class="repair-list">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/wuye/baoxiusq">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">报修申请列表</h2>
      </div>
    </div>

    <div class="content">
      <!-- 搜索和筛选区域 -->
      <div class="filter-section">
        <el-input
          v-model="searchQuery"
          placeholder="搜索报修单号/报修人"
          style="width: 200px;"
          clearable
          @input="handleSearch">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        
        <el-select v-model="statusFilter" placeholder="处理状态" clearable @change="handleSearch" style="width: 120px; margin-left: 10px;">
          <el-option label="待处理" value="pending"></el-option>
          <el-option label="处理中" value="processing"></el-option>
          <el-option label="已完成" value="completed"></el-option>
          <el-option label="已取消" value="cancelled"></el-option>
        </el-select>

        <el-select v-model="typeFilter" placeholder="报修类型" clearable @change="handleSearch" style="width: 120px; margin-left: 10px;">
          <el-option label="水电维修" value="水电维修"></el-option>
          <el-option label="空调维修" value="空调维修"></el-option>
          <el-option label="门窗维修" value="门窗维修"></el-option>
          <el-option label="家具维修" value="家具维修"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>

        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 260px; margin-left: 10px;"
          @change="handleSearch">
        </el-date-picker>
      </div>

      <!-- 列表内容 -->
      <el-table :data="filteredList" border style="width: 100%; margin-top: 20px;">
        <el-table-column prop="repairNo" label="报修单号" width="180"></el-table-column>
        <el-table-column prop="applicant" label="报修人" width="120"></el-table-column>
        <el-table-column prop="repairType" label="报修类型" width="120"></el-table-column>
        <el-table-column prop="location" label="报修位置" width="180">
          <template slot-scope="scope">
            {{ formatLocation(scope.row.location) }}
          </template>
        </el-table-column>
        <el-table-column prop="urgencyLevel" label="紧急程度" width="100">
          <template slot-scope="scope">
            <el-tag :type="getUrgencyType(scope.row.urgencyLevel)">
              {{ scope.row.urgencyLevel }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="处理状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180"></el-table-column>
        <el-table-column label="操作" width="260" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="printDetail(scope.row)">打印</el-button>
            <el-button 
              size="mini" 
              type="danger" 
              @click="cancelRepair(scope.row)"
              v-if="scope.row.status === '待处理'">取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="报修详情" :visible.sync="detailDialogVisible" width="50%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="报修单号">{{ currentDetail.repairNo }}</el-descriptions-item>
        <el-descriptions-item label="报修人">{{ currentDetail.applicant }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentDetail.phone }}</el-descriptions-item>
        <el-descriptions-item label="报修类型">{{ currentDetail.repairType }}</el-descriptions-item>
        <el-descriptions-item label="报修位置">{{ formatLocation(currentDetail.location) }}</el-descriptions-item>
        <el-descriptions-item label="紧急程度">
          <el-tag :type="getUrgencyType(currentDetail.urgencyLevel)">
            {{ currentDetail.urgencyLevel }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="故障描述" :span="2">{{ currentDetail.description }}</el-descriptions-item>
        <el-descriptions-item label="故障图片" :span="2">
          <div class="image-preview">
            <el-image
              v-for="(url, index) in currentDetail.imageUrls"
              :key="index"
              :src="url"
              :preview-src-list="currentDetail.imageUrls"
              fit="cover"
              style="width: 100px; height: 100px; margin-right: 10px;">
            </el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 添加打印模板（默认隐藏） -->
    <div class="print-content" ref="printArea" v-show="false">
      <div class="print-header">
        <h1>深圳市艾美思普科技有限公司</h1>
        <h2>报修申请单</h2>
      </div>
      <div class="print-body">
        <table class="print-table">
          <tr>
            <td class="label">报修单号：</td>
            <td>{{ printData.repairNo }}</td>
            <td class="label">申请时间：</td>
            <td>{{ printData.createTime }}</td>
          </tr>
          <tr>
            <td class="label">报修人：</td>
            <td>{{ printData.applicant }}</td>
            <td class="label">联系电话：</td>
            <td>{{ printData.phone }}</td>
          </tr>
          <tr>
            <td class="label">报修位置：</td>
            <td>{{ formatLocation(printData.location) }}</td>
            <td class="label">报修类型：</td>
            <td>{{ printData.repairType }}</td>
          </tr>
          <tr>
            <td class="label">紧急程度：</td>
            <td>{{ printData.urgencyLevel }}</td>
            <td class="label">处理状态：</td>
            <td>{{ printData.status }}</td>
          </tr>
          <tr>
            <td class="label">故障描述：</td>
            <td colspan="3">{{ printData.description }}</td>
          </tr>
          <tr v-if="printData.imageUrls && printData.imageUrls.length">
            <td class="label">故障图片：</td>
            <td colspan="3" class="image-cell">
              <img v-for="(url, index) in printData.imageUrls" 
                   :key="index" 
                   :src="url" 
                   class="print-image">
            </td>
          </tr>
        </table>
        <div class="print-footer">
          <div class="signature-area">
            <div class="signature-item">
              <span>报修人签字：</span>
              <span class="signature-line">_________________</span>
            </div>
            <div class="signature-item">
              <span>维修人签字：</span>
              <span class="signature-line">_________________</span>
            </div>
            <div class="signature-item">
              <span>日期：</span>
              <span class="signature-line">_________________</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RepairList',
  data() {
    return {
      searchQuery: '',
      statusFilter: '',
      typeFilter: '',
      dateRange: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      detailDialogVisible: false,
      currentDetail: {},
      printData: {},
      repairList: [
        {
          repairNo: 'BX202401160001',
          applicant: '张三',
          phone: '13800138000',
          repairType: '水电维修',
          location: ['A栋', '3层', '301室'],
          urgencyLevel: '紧急',
          status: '待处理',
          description: '卫生间水管漏水',
          createTime: '2024-01-16 10:30:00',
          imageUrls: []
        },
        {
          repairNo: 'BX202401160002',
          applicant: '李四',
          phone: '13900139000',
          repairType: '空调维修',
          location: ['B栋', '5层', '502室'],
          urgencyLevel: '一般',
          status: '处理中',
          description: '空调不制冷',
          createTime: '2024-01-16 11:20:00',
          imageUrls: []
        }
        // 可以添加更多测试数据
      ]
    }
  },
  computed: {
    filteredList() {
      let result = this.repairList

      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(item => 
          item.repairNo.toLowerCase().includes(query) ||
          item.applicant.toLowerCase().includes(query)
        )
      }

      // 状态过滤
      if (this.statusFilter) {
        result = result.filter(item => item.status === this.statusFilter)
      }

      // 类型过滤
      if (this.typeFilter) {
        result = result.filter(item => item.repairType === this.typeFilter)
      }

      // 日期过滤
      if (this.dateRange && this.dateRange.length === 2) {
        const startDate = this.dateRange[0]
        const endDate = this.dateRange[1]
        result = result.filter(item => {
          const itemDate = new Date(item.createTime)
          return itemDate >= startDate && itemDate <= endDate
        })
      }

      // 更新总数
      this.total = result.length

      // 分页处理
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return result.slice(start, end)
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    formatLocation(location) {
      return location ? location.join(' - ') : ''
    },
    getUrgencyType(level) {
      const types = {
        '特急': 'danger',
        '紧急': 'warning',
        '一般': 'info'
      }
      return types[level] || 'info'
    },
    getStatusType(status) {
      const types = {
        '待处理': 'info',
        '处理中': 'warning',
        '已完成': 'success',
        '已取消': 'danger'
      }
      return types[status] || 'info'
    },
    viewDetail(row) {
      this.currentDetail = { ...row }
      this.detailDialogVisible = true
    },
    async cancelRepair(row) {
      try {
        await this.$confirm('确认取消该报修申请吗？', '提示', {
          type: 'warning'
        })
        // TODO: 调用取消接口
        const index = this.repairList.findIndex(item => item.repairNo === row.repairNo)
        if (index > -1) {
          this.repairList[index].status = '已取消'
          this.$message.success('报修申请已取消')
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('取消失败')
        }
      }
    },
    printDetail(row) {
      this.printData = { ...row }
      this.$nextTick(() => {
        const printArea = this.$refs.printArea
        const originalContents = document.body.innerHTML
        
        // 保存当前页面内容
        const printContents = printArea.innerHTML
        
        // 替换页面内容为打印内容
        document.body.innerHTML = `
          <div style="padding: 20px;">
            ${printContents}
          </div>
        `
        
        // 调用打印
        window.print()
        
        // 恢复原页面内容
        document.body.innerHTML = originalContents
        
        // 重新挂载 Vue 实例
        this.$mount()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-list {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;

      .back-btn {
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
        flex: 1;
        text-align: center;
      }
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .filter-section {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }

  .image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .print-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    .print-header {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      text-align: center;

      h2 {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }
    }

    .print-body {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      width: 80%;
      max-width: 800px;

      .print-table {
        width: 100%;
        border-collapse: collapse;

        .label {
          font-weight: bold;
        }

        td {
          padding: 10px;
          border: 1px solid #ddd;
        }

        .image-cell {
          padding: 0;
          border: none;

          .print-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            margin-right: 10px;
          }
        }
      }

      .print-footer {
        margin-top: 20px;
        text-align: right;

        .signature-area {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .signature-item {
            display: flex;
            flex-direction: column;

            span {
              margin-bottom: 5px;
            }
          }

          .signature-line {
            width: 100px;
            height: 1px;
            background: #ddd;
          }
        }
      }
    }
  }
}

// 添加打印样式
@media print {
  body {
    background: white;
    font-family: SimSun, "宋体", serif;
  }

  .print-content {
    position: static;
    display: block;
    background: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    font-family: SimSun, "宋体", serif;
  }

  .print-header {
    text-align: center;
    margin-bottom: 20px;

    h1, h2 {
      font-family: SimSun, "宋体", serif;
    }

    h1 {
      font-size: 20px;
      margin-bottom: 10px;
    }

    h2 {
      font-size: 18px;
    }
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-family: SimSun, "宋体", serif;
    font-size: 14px;

    td {
      padding: 8px;
      border: 1px solid #000;
      font-family: SimSun, "宋体", serif;
    }

    .label {
      font-weight: bold;
      background-color: #f5f5f5;
      font-family: SimSun, "宋体", serif;
    }
  }

  .print-footer {
    margin-top: 50px;
    font-family: SimSun, "宋体", serif;
    font-size: 14px;

    .signature-area {
      display: flex;
      justify-content: space-between;
      padding: 0 50px;

      .signature-item {
        text-align: center;
        font-family: SimSun, "宋体", serif;

        .signature-line {
          display: inline-block;
          width: 150px;
          border-bottom: 1px solid #000;
          margin-top: 30px;
        }
      }
    }
  }

  // 隐藏不需要打印的元素
  .el-button,
  .el-dialog,
  .filter-section,
  .pagination-container {
    display: none !important;
  }
}
</style> 
  <div class="repair-list">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/wuye/baoxiusq">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">报修申请列表</h2>
      </div>
    </div>

    <div class="content">
      <!-- 搜索和筛选区域 -->
      <div class="filter-section">
        <el-input
          v-model="searchQuery"
          placeholder="搜索报修单号/报修人"
          style="width: 200px;"
          clearable
          @input="handleSearch">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        
        <el-select v-model="statusFilter" placeholder="处理状态" clearable @change="handleSearch" style="width: 120px; margin-left: 10px;">
          <el-option label="待处理" value="pending"></el-option>
          <el-option label="处理中" value="processing"></el-option>
          <el-option label="已完成" value="completed"></el-option>
          <el-option label="已取消" value="cancelled"></el-option>
        </el-select>

        <el-select v-model="typeFilter" placeholder="报修类型" clearable @change="handleSearch" style="width: 120px; margin-left: 10px;">
          <el-option label="水电维修" value="水电维修"></el-option>
          <el-option label="空调维修" value="空调维修"></el-option>
          <el-option label="门窗维修" value="门窗维修"></el-option>
          <el-option label="家具维修" value="家具维修"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>

        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 260px; margin-left: 10px;"
          @change="handleSearch">
        </el-date-picker>
      </div>

      <!-- 列表内容 -->
      <el-table :data="filteredList" border style="width: 100%; margin-top: 20px;">
        <el-table-column prop="repairNo" label="报修单号" width="180"></el-table-column>
        <el-table-column prop="applicant" label="报修人" width="120"></el-table-column>
        <el-table-column prop="repairType" label="报修类型" width="120"></el-table-column>
        <el-table-column prop="location" label="报修位置" width="180">
          <template slot-scope="scope">
            {{ formatLocation(scope.row.location) }}
          </template>
        </el-table-column>
        <el-table-column prop="urgencyLevel" label="紧急程度" width="100">
          <template slot-scope="scope">
            <el-tag :type="getUrgencyType(scope.row.urgencyLevel)">
              {{ scope.row.urgencyLevel }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="处理状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180"></el-table-column>
        <el-table-column label="操作" width="260" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="printDetail(scope.row)">打印</el-button>
            <el-button 
              size="mini" 
              type="danger" 
              @click="cancelRepair(scope.row)"
              v-if="scope.row.status === '待处理'">取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="报修详情" :visible.sync="detailDialogVisible" width="50%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="报修单号">{{ currentDetail.repairNo }}</el-descriptions-item>
        <el-descriptions-item label="报修人">{{ currentDetail.applicant }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentDetail.phone }}</el-descriptions-item>
        <el-descriptions-item label="报修类型">{{ currentDetail.repairType }}</el-descriptions-item>
        <el-descriptions-item label="报修位置">{{ formatLocation(currentDetail.location) }}</el-descriptions-item>
        <el-descriptions-item label="紧急程度">
          <el-tag :type="getUrgencyType(currentDetail.urgencyLevel)">
            {{ currentDetail.urgencyLevel }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="故障描述" :span="2">{{ currentDetail.description }}</el-descriptions-item>
        <el-descriptions-item label="故障图片" :span="2">
          <div class="image-preview">
            <el-image
              v-for="(url, index) in currentDetail.imageUrls"
              :key="index"
              :src="url"
              :preview-src-list="currentDetail.imageUrls"
              fit="cover"
              style="width: 100px; height: 100px; margin-right: 10px;">
            </el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 添加打印模板（默认隐藏） -->
    <div class="print-content" ref="printArea" v-show="false">
      <div class="print-header">
        <h1>深圳市艾美思普科技有限公司</h1>
        <h2>报修申请单</h2>
      </div>
      <div class="print-body">
        <table class="print-table">
          <tr>
            <td class="label">报修单号：</td>
            <td>{{ printData.repairNo }}</td>
            <td class="label">申请时间：</td>
            <td>{{ printData.createTime }}</td>
          </tr>
          <tr>
            <td class="label">报修人：</td>
            <td>{{ printData.applicant }}</td>
            <td class="label">联系电话：</td>
            <td>{{ printData.phone }}</td>
          </tr>
          <tr>
            <td class="label">报修位置：</td>
            <td>{{ formatLocation(printData.location) }}</td>
            <td class="label">报修类型：</td>
            <td>{{ printData.repairType }}</td>
          </tr>
          <tr>
            <td class="label">紧急程度：</td>
            <td>{{ printData.urgencyLevel }}</td>
            <td class="label">处理状态：</td>
            <td>{{ printData.status }}</td>
          </tr>
          <tr>
            <td class="label">故障描述：</td>
            <td colspan="3">{{ printData.description }}</td>
          </tr>
          <tr v-if="printData.imageUrls && printData.imageUrls.length">
            <td class="label">故障图片：</td>
            <td colspan="3" class="image-cell">
              <img v-for="(url, index) in printData.imageUrls" 
                   :key="index" 
                   :src="url" 
                   class="print-image">
            </td>
          </tr>
        </table>
        <div class="print-footer">
          <div class="signature-area">
            <div class="signature-item">
              <span>报修人签字：</span>
              <span class="signature-line">_________________</span>
            </div>
            <div class="signature-item">
              <span>维修人签字：</span>
              <span class="signature-line">_________________</span>
            </div>
            <div class="signature-item">
              <span>日期：</span>
              <span class="signature-line">_________________</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RepairList',
  data() {
    return {
      searchQuery: '',
      statusFilter: '',
      typeFilter: '',
      dateRange: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      detailDialogVisible: false,
      currentDetail: {},
      printData: {},
      repairList: [
        {
          repairNo: 'BX202401160001',
          applicant: '张三',
          phone: '13800138000',
          repairType: '水电维修',
          location: ['A栋', '3层', '301室'],
          urgencyLevel: '紧急',
          status: '待处理',
          description: '卫生间水管漏水',
          createTime: '2024-01-16 10:30:00',
          imageUrls: []
        },
        {
          repairNo: 'BX202401160002',
          applicant: '李四',
          phone: '13900139000',
          repairType: '空调维修',
          location: ['B栋', '5层', '502室'],
          urgencyLevel: '一般',
          status: '处理中',
          description: '空调不制冷',
          createTime: '2024-01-16 11:20:00',
          imageUrls: []
        }
        // 可以添加更多测试数据
      ]
    }
  },
  computed: {
    filteredList() {
      let result = this.repairList

      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(item => 
          item.repairNo.toLowerCase().includes(query) ||
          item.applicant.toLowerCase().includes(query)
        )
      }

      // 状态过滤
      if (this.statusFilter) {
        result = result.filter(item => item.status === this.statusFilter)
      }

      // 类型过滤
      if (this.typeFilter) {
        result = result.filter(item => item.repairType === this.typeFilter)
      }

      // 日期过滤
      if (this.dateRange && this.dateRange.length === 2) {
        const startDate = this.dateRange[0]
        const endDate = this.dateRange[1]
        result = result.filter(item => {
          const itemDate = new Date(item.createTime)
          return itemDate >= startDate && itemDate <= endDate
        })
      }

      // 更新总数
      this.total = result.length

      // 分页处理
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return result.slice(start, end)
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    formatLocation(location) {
      return location ? location.join(' - ') : ''
    },
    getUrgencyType(level) {
      const types = {
        '特急': 'danger',
        '紧急': 'warning',
        '一般': 'info'
      }
      return types[level] || 'info'
    },
    getStatusType(status) {
      const types = {
        '待处理': 'info',
        '处理中': 'warning',
        '已完成': 'success',
        '已取消': 'danger'
      }
      return types[status] || 'info'
    },
    viewDetail(row) {
      this.currentDetail = { ...row }
      this.detailDialogVisible = true
    },
    async cancelRepair(row) {
      try {
        await this.$confirm('确认取消该报修申请吗？', '提示', {
          type: 'warning'
        })
        // TODO: 调用取消接口
        const index = this.repairList.findIndex(item => item.repairNo === row.repairNo)
        if (index > -1) {
          this.repairList[index].status = '已取消'
          this.$message.success('报修申请已取消')
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('取消失败')
        }
      }
    },
    printDetail(row) {
      this.printData = { ...row }
      this.$nextTick(() => {
        const printArea = this.$refs.printArea
        const originalContents = document.body.innerHTML
        
        // 保存当前页面内容
        const printContents = printArea.innerHTML
        
        // 替换页面内容为打印内容
        document.body.innerHTML = `
          <div style="padding: 20px;">
            ${printContents}
          </div>
        `
        
        // 调用打印
        window.print()
        
        // 恢复原页面内容
        document.body.innerHTML = originalContents
        
        // 重新挂载 Vue 实例
        this.$mount()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-list {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;

      .back-btn {
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
        flex: 1;
        text-align: center;
      }
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .filter-section {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }

  .image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .print-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    .print-header {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      text-align: center;

      h2 {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }
    }

    .print-body {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      width: 80%;
      max-width: 800px;

      .print-table {
        width: 100%;
        border-collapse: collapse;

        .label {
          font-weight: bold;
        }

        td {
          padding: 10px;
          border: 1px solid #ddd;
        }

        .image-cell {
          padding: 0;
          border: none;

          .print-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            margin-right: 10px;
          }
        }
      }

      .print-footer {
        margin-top: 20px;
        text-align: right;

        .signature-area {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .signature-item {
            display: flex;
            flex-direction: column;

            span {
              margin-bottom: 5px;
            }
          }

          .signature-line {
            width: 100px;
            height: 1px;
            background: #ddd;
          }
        }
      }
    }
  }
}

// 添加打印样式
@media print {
  body {
    background: white;
    font-family: SimSun, "宋体", serif;
  }

  .print-content {
    position: static;
    display: block;
    background: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    font-family: SimSun, "宋体", serif;
  }

  .print-header {
    text-align: center;
    margin-bottom: 20px;

    h1, h2 {
      font-family: SimSun, "宋体", serif;
    }

    h1 {
      font-size: 20px;
      margin-bottom: 10px;
    }

    h2 {
      font-size: 18px;
    }
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-family: SimSun, "宋体", serif;
    font-size: 14px;

    td {
      padding: 8px;
      border: 1px solid #000;
      font-family: SimSun, "宋体", serif;
    }

    .label {
      font-weight: bold;
      background-color: #f5f5f5;
      font-family: SimSun, "宋体", serif;
    }
  }

  .print-footer {
    margin-top: 50px;
    font-family: SimSun, "宋体", serif;
    font-size: 14px;

    .signature-area {
      display: flex;
      justify-content: space-between;
      padding: 0 50px;

      .signature-item {
        text-align: center;
        font-family: SimSun, "宋体", serif;

        .signature-line {
          display: inline-block;
          width: 150px;
          border-bottom: 1px solid #000;
          margin-top: 30px;
        }
      }
    }
  }

  // 隐藏不需要打印的元素
  .el-button,
  .el-dialog,
  .filter-section,
  .pagination-container {
    display: none !important;
  }
}
</style> 
 
 
 
 
  <div class="repair-list">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/wuye/baoxiusq">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">报修申请列表</h2>
      </div>
    </div>

    <div class="content">
      <!-- 搜索和筛选区域 -->
      <div class="filter-section">
        <el-input
          v-model="searchQuery"
          placeholder="搜索报修单号/报修人"
          style="width: 200px;"
          clearable
          @input="handleSearch">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        
        <el-select v-model="statusFilter" placeholder="处理状态" clearable @change="handleSearch" style="width: 120px; margin-left: 10px;">
          <el-option label="待处理" value="pending"></el-option>
          <el-option label="处理中" value="processing"></el-option>
          <el-option label="已完成" value="completed"></el-option>
          <el-option label="已取消" value="cancelled"></el-option>
        </el-select>

        <el-select v-model="typeFilter" placeholder="报修类型" clearable @change="handleSearch" style="width: 120px; margin-left: 10px;">
          <el-option label="水电维修" value="水电维修"></el-option>
          <el-option label="空调维修" value="空调维修"></el-option>
          <el-option label="门窗维修" value="门窗维修"></el-option>
          <el-option label="家具维修" value="家具维修"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>

        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 260px; margin-left: 10px;"
          @change="handleSearch">
        </el-date-picker>
      </div>

      <!-- 列表内容 -->
      <el-table :data="filteredList" border style="width: 100%; margin-top: 20px;">
        <el-table-column prop="repairNo" label="报修单号" width="180"></el-table-column>
        <el-table-column prop="applicant" label="报修人" width="120"></el-table-column>
        <el-table-column prop="repairType" label="报修类型" width="120"></el-table-column>
        <el-table-column prop="location" label="报修位置" width="180">
          <template slot-scope="scope">
            {{ formatLocation(scope.row.location) }}
          </template>
        </el-table-column>
        <el-table-column prop="urgencyLevel" label="紧急程度" width="100">
          <template slot-scope="scope">
            <el-tag :type="getUrgencyType(scope.row.urgencyLevel)">
              {{ scope.row.urgencyLevel }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="处理状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180"></el-table-column>
        <el-table-column label="操作" width="260" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="printDetail(scope.row)">打印</el-button>
            <el-button 
              size="mini" 
              type="danger" 
              @click="cancelRepair(scope.row)"
              v-if="scope.row.status === '待处理'">取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="报修详情" :visible.sync="detailDialogVisible" width="50%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="报修单号">{{ currentDetail.repairNo }}</el-descriptions-item>
        <el-descriptions-item label="报修人">{{ currentDetail.applicant }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentDetail.phone }}</el-descriptions-item>
        <el-descriptions-item label="报修类型">{{ currentDetail.repairType }}</el-descriptions-item>
        <el-descriptions-item label="报修位置">{{ formatLocation(currentDetail.location) }}</el-descriptions-item>
        <el-descriptions-item label="紧急程度">
          <el-tag :type="getUrgencyType(currentDetail.urgencyLevel)">
            {{ currentDetail.urgencyLevel }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="故障描述" :span="2">{{ currentDetail.description }}</el-descriptions-item>
        <el-descriptions-item label="故障图片" :span="2">
          <div class="image-preview">
            <el-image
              v-for="(url, index) in currentDetail.imageUrls"
              :key="index"
              :src="url"
              :preview-src-list="currentDetail.imageUrls"
              fit="cover"
              style="width: 100px; height: 100px; margin-right: 10px;">
            </el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 添加打印模板（默认隐藏） -->
    <div class="print-content" ref="printArea" v-show="false">
      <div class="print-header">
        <h1>深圳市艾美思普科技有限公司</h1>
        <h2>报修申请单</h2>
      </div>
      <div class="print-body">
        <table class="print-table">
          <tr>
            <td class="label">报修单号：</td>
            <td>{{ printData.repairNo }}</td>
            <td class="label">申请时间：</td>
            <td>{{ printData.createTime }}</td>
          </tr>
          <tr>
            <td class="label">报修人：</td>
            <td>{{ printData.applicant }}</td>
            <td class="label">联系电话：</td>
            <td>{{ printData.phone }}</td>
          </tr>
          <tr>
            <td class="label">报修位置：</td>
            <td>{{ formatLocation(printData.location) }}</td>
            <td class="label">报修类型：</td>
            <td>{{ printData.repairType }}</td>
          </tr>
          <tr>
            <td class="label">紧急程度：</td>
            <td>{{ printData.urgencyLevel }}</td>
            <td class="label">处理状态：</td>
            <td>{{ printData.status }}</td>
          </tr>
          <tr>
            <td class="label">故障描述：</td>
            <td colspan="3">{{ printData.description }}</td>
          </tr>
          <tr v-if="printData.imageUrls && printData.imageUrls.length">
            <td class="label">故障图片：</td>
            <td colspan="3" class="image-cell">
              <img v-for="(url, index) in printData.imageUrls" 
                   :key="index" 
                   :src="url" 
                   class="print-image">
            </td>
          </tr>
        </table>
        <div class="print-footer">
          <div class="signature-area">
            <div class="signature-item">
              <span>报修人签字：</span>
              <span class="signature-line">_________________</span>
            </div>
            <div class="signature-item">
              <span>维修人签字：</span>
              <span class="signature-line">_________________</span>
            </div>
            <div class="signature-item">
              <span>日期：</span>
              <span class="signature-line">_________________</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RepairList',
  data() {
    return {
      searchQuery: '',
      statusFilter: '',
      typeFilter: '',
      dateRange: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      detailDialogVisible: false,
      currentDetail: {},
      printData: {},
      repairList: [
        {
          repairNo: 'BX202401160001',
          applicant: '张三',
          phone: '13800138000',
          repairType: '水电维修',
          location: ['A栋', '3层', '301室'],
          urgencyLevel: '紧急',
          status: '待处理',
          description: '卫生间水管漏水',
          createTime: '2024-01-16 10:30:00',
          imageUrls: []
        },
        {
          repairNo: 'BX202401160002',
          applicant: '李四',
          phone: '13900139000',
          repairType: '空调维修',
          location: ['B栋', '5层', '502室'],
          urgencyLevel: '一般',
          status: '处理中',
          description: '空调不制冷',
          createTime: '2024-01-16 11:20:00',
          imageUrls: []
        }
        // 可以添加更多测试数据
      ]
    }
  },
  computed: {
    filteredList() {
      let result = this.repairList

      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(item => 
          item.repairNo.toLowerCase().includes(query) ||
          item.applicant.toLowerCase().includes(query)
        )
      }

      // 状态过滤
      if (this.statusFilter) {
        result = result.filter(item => item.status === this.statusFilter)
      }

      // 类型过滤
      if (this.typeFilter) {
        result = result.filter(item => item.repairType === this.typeFilter)
      }

      // 日期过滤
      if (this.dateRange && this.dateRange.length === 2) {
        const startDate = this.dateRange[0]
        const endDate = this.dateRange[1]
        result = result.filter(item => {
          const itemDate = new Date(item.createTime)
          return itemDate >= startDate && itemDate <= endDate
        })
      }

      // 更新总数
      this.total = result.length

      // 分页处理
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return result.slice(start, end)
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    formatLocation(location) {
      return location ? location.join(' - ') : ''
    },
    getUrgencyType(level) {
      const types = {
        '特急': 'danger',
        '紧急': 'warning',
        '一般': 'info'
      }
      return types[level] || 'info'
    },
    getStatusType(status) {
      const types = {
        '待处理': 'info',
        '处理中': 'warning',
        '已完成': 'success',
        '已取消': 'danger'
      }
      return types[status] || 'info'
    },
    viewDetail(row) {
      this.currentDetail = { ...row }
      this.detailDialogVisible = true
    },
    async cancelRepair(row) {
      try {
        await this.$confirm('确认取消该报修申请吗？', '提示', {
          type: 'warning'
        })
        // TODO: 调用取消接口
        const index = this.repairList.findIndex(item => item.repairNo === row.repairNo)
        if (index > -1) {
          this.repairList[index].status = '已取消'
          this.$message.success('报修申请已取消')
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('取消失败')
        }
      }
    },
    printDetail(row) {
      this.printData = { ...row }
      this.$nextTick(() => {
        const printArea = this.$refs.printArea
        const originalContents = document.body.innerHTML
        
        // 保存当前页面内容
        const printContents = printArea.innerHTML
        
        // 替换页面内容为打印内容
        document.body.innerHTML = `
          <div style="padding: 20px;">
            ${printContents}
          </div>
        `
        
        // 调用打印
        window.print()
        
        // 恢复原页面内容
        document.body.innerHTML = originalContents
        
        // 重新挂载 Vue 实例
        this.$mount()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-list {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;

      .back-btn {
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
        flex: 1;
        text-align: center;
      }
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .filter-section {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }

  .image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .print-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    .print-header {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      text-align: center;

      h2 {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }
    }

    .print-body {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      width: 80%;
      max-width: 800px;

      .print-table {
        width: 100%;
        border-collapse: collapse;

        .label {
          font-weight: bold;
        }

        td {
          padding: 10px;
          border: 1px solid #ddd;
        }

        .image-cell {
          padding: 0;
          border: none;

          .print-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            margin-right: 10px;
          }
        }
      }

      .print-footer {
        margin-top: 20px;
        text-align: right;

        .signature-area {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .signature-item {
            display: flex;
            flex-direction: column;

            span {
              margin-bottom: 5px;
            }
          }

          .signature-line {
            width: 100px;
            height: 1px;
            background: #ddd;
          }
        }
      }
    }
  }
}

// 添加打印样式
@media print {
  body {
    background: white;
    font-family: SimSun, "宋体", serif;
  }

  .print-content {
    position: static;
    display: block;
    background: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    font-family: SimSun, "宋体", serif;
  }

  .print-header {
    text-align: center;
    margin-bottom: 20px;

    h1, h2 {
      font-family: SimSun, "宋体", serif;
    }

    h1 {
      font-size: 20px;
      margin-bottom: 10px;
    }

    h2 {
      font-size: 18px;
    }
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-family: SimSun, "宋体", serif;
    font-size: 14px;

    td {
      padding: 8px;
      border: 1px solid #000;
      font-family: SimSun, "宋体", serif;
    }

    .label {
      font-weight: bold;
      background-color: #f5f5f5;
      font-family: SimSun, "宋体", serif;
    }
  }

  .print-footer {
    margin-top: 50px;
    font-family: SimSun, "宋体", serif;
    font-size: 14px;

    .signature-area {
      display: flex;
      justify-content: space-between;
      padding: 0 50px;

      .signature-item {
        text-align: center;
        font-family: SimSun, "宋体", serif;

        .signature-line {
          display: inline-block;
          width: 150px;
          border-bottom: 1px solid #000;
          margin-top: 30px;
        }
      }
    }
  }

  // 隐藏不需要打印的元素
  .el-button,
  .el-dialog,
  .filter-section,
  .pagination-container {
    display: none !important;
  }
}
</style> 
  <div class="repair-list">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/wuye/baoxiusq">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">报修申请列表</h2>
      </div>
    </div>

    <div class="content">
      <!-- 搜索和筛选区域 -->
      <div class="filter-section">
        <el-input
          v-model="searchQuery"
          placeholder="搜索报修单号/报修人"
          style="width: 200px;"
          clearable
          @input="handleSearch">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        
        <el-select v-model="statusFilter" placeholder="处理状态" clearable @change="handleSearch" style="width: 120px; margin-left: 10px;">
          <el-option label="待处理" value="pending"></el-option>
          <el-option label="处理中" value="processing"></el-option>
          <el-option label="已完成" value="completed"></el-option>
          <el-option label="已取消" value="cancelled"></el-option>
        </el-select>

        <el-select v-model="typeFilter" placeholder="报修类型" clearable @change="handleSearch" style="width: 120px; margin-left: 10px;">
          <el-option label="水电维修" value="水电维修"></el-option>
          <el-option label="空调维修" value="空调维修"></el-option>
          <el-option label="门窗维修" value="门窗维修"></el-option>
          <el-option label="家具维修" value="家具维修"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>

        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 260px; margin-left: 10px;"
          @change="handleSearch">
        </el-date-picker>
      </div>

      <!-- 列表内容 -->
      <el-table :data="filteredList" border style="width: 100%; margin-top: 20px;">
        <el-table-column prop="repairNo" label="报修单号" width="180"></el-table-column>
        <el-table-column prop="applicant" label="报修人" width="120"></el-table-column>
        <el-table-column prop="repairType" label="报修类型" width="120"></el-table-column>
        <el-table-column prop="location" label="报修位置" width="180">
          <template slot-scope="scope">
            {{ formatLocation(scope.row.location) }}
          </template>
        </el-table-column>
        <el-table-column prop="urgencyLevel" label="紧急程度" width="100">
          <template slot-scope="scope">
            <el-tag :type="getUrgencyType(scope.row.urgencyLevel)">
              {{ scope.row.urgencyLevel }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="处理状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180"></el-table-column>
        <el-table-column label="操作" width="260" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="printDetail(scope.row)">打印</el-button>
            <el-button 
              size="mini" 
              type="danger" 
              @click="cancelRepair(scope.row)"
              v-if="scope.row.status === '待处理'">取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="报修详情" :visible.sync="detailDialogVisible" width="50%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="报修单号">{{ currentDetail.repairNo }}</el-descriptions-item>
        <el-descriptions-item label="报修人">{{ currentDetail.applicant }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentDetail.phone }}</el-descriptions-item>
        <el-descriptions-item label="报修类型">{{ currentDetail.repairType }}</el-descriptions-item>
        <el-descriptions-item label="报修位置">{{ formatLocation(currentDetail.location) }}</el-descriptions-item>
        <el-descriptions-item label="紧急程度">
          <el-tag :type="getUrgencyType(currentDetail.urgencyLevel)">
            {{ currentDetail.urgencyLevel }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="故障描述" :span="2">{{ currentDetail.description }}</el-descriptions-item>
        <el-descriptions-item label="故障图片" :span="2">
          <div class="image-preview">
            <el-image
              v-for="(url, index) in currentDetail.imageUrls"
              :key="index"
              :src="url"
              :preview-src-list="currentDetail.imageUrls"
              fit="cover"
              style="width: 100px; height: 100px; margin-right: 10px;">
            </el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 添加打印模板（默认隐藏） -->
    <div class="print-content" ref="printArea" v-show="false">
      <div class="print-header">
        <h1>深圳市艾美思普科技有限公司</h1>
        <h2>报修申请单</h2>
      </div>
      <div class="print-body">
        <table class="print-table">
          <tr>
            <td class="label">报修单号：</td>
            <td>{{ printData.repairNo }}</td>
            <td class="label">申请时间：</td>
            <td>{{ printData.createTime }}</td>
          </tr>
          <tr>
            <td class="label">报修人：</td>
            <td>{{ printData.applicant }}</td>
            <td class="label">联系电话：</td>
            <td>{{ printData.phone }}</td>
          </tr>
          <tr>
            <td class="label">报修位置：</td>
            <td>{{ formatLocation(printData.location) }}</td>
            <td class="label">报修类型：</td>
            <td>{{ printData.repairType }}</td>
          </tr>
          <tr>
            <td class="label">紧急程度：</td>
            <td>{{ printData.urgencyLevel }}</td>
            <td class="label">处理状态：</td>
            <td>{{ printData.status }}</td>
          </tr>
          <tr>
            <td class="label">故障描述：</td>
            <td colspan="3">{{ printData.description }}</td>
          </tr>
          <tr v-if="printData.imageUrls && printData.imageUrls.length">
            <td class="label">故障图片：</td>
            <td colspan="3" class="image-cell">
              <img v-for="(url, index) in printData.imageUrls" 
                   :key="index" 
                   :src="url" 
                   class="print-image">
            </td>
          </tr>
        </table>
        <div class="print-footer">
          <div class="signature-area">
            <div class="signature-item">
              <span>报修人签字：</span>
              <span class="signature-line">_________________</span>
            </div>
            <div class="signature-item">
              <span>维修人签字：</span>
              <span class="signature-line">_________________</span>
            </div>
            <div class="signature-item">
              <span>日期：</span>
              <span class="signature-line">_________________</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RepairList',
  data() {
    return {
      searchQuery: '',
      statusFilter: '',
      typeFilter: '',
      dateRange: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      detailDialogVisible: false,
      currentDetail: {},
      printData: {},
      repairList: [
        {
          repairNo: 'BX202401160001',
          applicant: '张三',
          phone: '13800138000',
          repairType: '水电维修',
          location: ['A栋', '3层', '301室'],
          urgencyLevel: '紧急',
          status: '待处理',
          description: '卫生间水管漏水',
          createTime: '2024-01-16 10:30:00',
          imageUrls: []
        },
        {
          repairNo: 'BX202401160002',
          applicant: '李四',
          phone: '13900139000',
          repairType: '空调维修',
          location: ['B栋', '5层', '502室'],
          urgencyLevel: '一般',
          status: '处理中',
          description: '空调不制冷',
          createTime: '2024-01-16 11:20:00',
          imageUrls: []
        }
        // 可以添加更多测试数据
      ]
    }
  },
  computed: {
    filteredList() {
      let result = this.repairList

      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(item => 
          item.repairNo.toLowerCase().includes(query) ||
          item.applicant.toLowerCase().includes(query)
        )
      }

      // 状态过滤
      if (this.statusFilter) {
        result = result.filter(item => item.status === this.statusFilter)
      }

      // 类型过滤
      if (this.typeFilter) {
        result = result.filter(item => item.repairType === this.typeFilter)
      }

      // 日期过滤
      if (this.dateRange && this.dateRange.length === 2) {
        const startDate = this.dateRange[0]
        const endDate = this.dateRange[1]
        result = result.filter(item => {
          const itemDate = new Date(item.createTime)
          return itemDate >= startDate && itemDate <= endDate
        })
      }

      // 更新总数
      this.total = result.length

      // 分页处理
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return result.slice(start, end)
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    formatLocation(location) {
      return location ? location.join(' - ') : ''
    },
    getUrgencyType(level) {
      const types = {
        '特急': 'danger',
        '紧急': 'warning',
        '一般': 'info'
      }
      return types[level] || 'info'
    },
    getStatusType(status) {
      const types = {
        '待处理': 'info',
        '处理中': 'warning',
        '已完成': 'success',
        '已取消': 'danger'
      }
      return types[status] || 'info'
    },
    viewDetail(row) {
      this.currentDetail = { ...row }
      this.detailDialogVisible = true
    },
    async cancelRepair(row) {
      try {
        await this.$confirm('确认取消该报修申请吗？', '提示', {
          type: 'warning'
        })
        // TODO: 调用取消接口
        const index = this.repairList.findIndex(item => item.repairNo === row.repairNo)
        if (index > -1) {
          this.repairList[index].status = '已取消'
          this.$message.success('报修申请已取消')
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('取消失败')
        }
      }
    },
    printDetail(row) {
      this.printData = { ...row }
      this.$nextTick(() => {
        const printArea = this.$refs.printArea
        const originalContents = document.body.innerHTML
        
        // 保存当前页面内容
        const printContents = printArea.innerHTML
        
        // 替换页面内容为打印内容
        document.body.innerHTML = `
          <div style="padding: 20px;">
            ${printContents}
          </div>
        `
        
        // 调用打印
        window.print()
        
        // 恢复原页面内容
        document.body.innerHTML = originalContents
        
        // 重新挂载 Vue 实例
        this.$mount()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-list {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;

      .back-btn {
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
        flex: 1;
        text-align: center;
      }
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .filter-section {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }

  .image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .print-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    .print-header {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      text-align: center;

      h2 {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }
    }

    .print-body {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      width: 80%;
      max-width: 800px;

      .print-table {
        width: 100%;
        border-collapse: collapse;

        .label {
          font-weight: bold;
        }

        td {
          padding: 10px;
          border: 1px solid #ddd;
        }

        .image-cell {
          padding: 0;
          border: none;

          .print-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            margin-right: 10px;
          }
        }
      }

      .print-footer {
        margin-top: 20px;
        text-align: right;

        .signature-area {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .signature-item {
            display: flex;
            flex-direction: column;

            span {
              margin-bottom: 5px;
            }
          }

          .signature-line {
            width: 100px;
            height: 1px;
            background: #ddd;
          }
        }
      }
    }
  }
}

// 添加打印样式
@media print {
  body {
    background: white;
    font-family: SimSun, "宋体", serif;
  }

  .print-content {
    position: static;
    display: block;
    background: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    font-family: SimSun, "宋体", serif;
  }

  .print-header {
    text-align: center;
    margin-bottom: 20px;

    h1, h2 {
      font-family: SimSun, "宋体", serif;
    }

    h1 {
      font-size: 20px;
      margin-bottom: 10px;
    }

    h2 {
      font-size: 18px;
    }
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-family: SimSun, "宋体", serif;
    font-size: 14px;

    td {
      padding: 8px;
      border: 1px solid #000;
      font-family: SimSun, "宋体", serif;
    }

    .label {
      font-weight: bold;
      background-color: #f5f5f5;
      font-family: SimSun, "宋体", serif;
    }
  }

  .print-footer {
    margin-top: 50px;
    font-family: SimSun, "宋体", serif;
    font-size: 14px;

    .signature-area {
      display: flex;
      justify-content: space-between;
      padding: 0 50px;

      .signature-item {
        text-align: center;
        font-family: SimSun, "宋体", serif;

        .signature-line {
          display: inline-block;
          width: 150px;
          border-bottom: 1px solid #000;
          margin-top: 30px;
        }
      }
    }
  }

  // 隐藏不需要打印的元素
  .el-button,
  .el-dialog,
  .filter-section,
  .pagination-container {
    display: none !important;
  }
}
</style> 
 
 
 
 